<template>
  <div class="login-page-wrap">
    <div class="login-header">
      <div class="model-name">
<!--        普陀反电诈案件监控系统-->
        普公英3185
      </div>
    </div>
    <div class="login-frame-wrap">
      <div class="title">
        <div class="t-item" @click="isPhone=false" :class="[( !isPhone ? 'checked' : null )]">
          账号登录
        </div>
<!--        <div class="t-item" @click="isPhone=true" :class="[( isPhone ? 'checked' : null )]">-->
<!--          手机验证码登录-->
<!--        </div>-->
      </div>
      <div class="zh" v-if="!isPhone">
        <div class="username">
          <el-input v-model="usrForm.username" placeholder="账号" prefix-icon="el-icon-user-solid">
          </el-input>
        </div>
        <div class="userpw">
          <el-input v-model="usrForm.password" placeholder="密码" show-password prefix-icon="el-icon-unlock"></el-input>
        </div>
        <div class="yzm-wrap">
          <el-input v-model="usrForm.code" placeholder="请输入验证码"></el-input>
          <div class="image" @click="refreshCode" title="刷新验证码">
            <img :src="yanzhengma" alt="">
          </div>
        </div>
      </div>
      <div class="phone" v-if="isPhone">
        <div class="username">
          <el-input v-model="usrForm.phonenum" placeholder="手机号码" prefix-icon="el-icon-user-solid">
          </el-input>
        </div>
        <div class="userpw">
          <el-input v-model="usrForm.msgCode" placeholder="请输入验证码"></el-input>
          <el-button type="primary" @click="getPhoneValidCode">获取验证码 <span v-show="codeTimer">({{codeIndex}})</span></el-button>
        </div>
      </div>
      <div class="login-submit">
        <el-button type="primary" icon="el-icon-lock" @click="loginHandle">安全登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/login.api'

export default {
  components: {},

  data() {
    return {
      codeIndex: 60,
      codeTimer: null,
      yanzhengma: '',
      isPhone: false,
      usrForm: {
        username: '',
        password: ''
      }
    }
  },
  computed: {},
  created() {
      this.getCode()
  },
  watch: {},
  methods: {
    setCodeTimer () {
        if(this.codeTimer){
            clearInterval(this.codeTimer)
            this.codeTimer = null
        }
        this.codeTimer = setInterval(()=>{
            if(this.codeIndex === 1){
                clearInterval(this.codeTimer)
                this.codeTimer = null
                this.codeIndex = 60
            }else{
                this.codeIndex--
            }
        }, 1000)
    },
    phoneLogin () {
        console.log(this.usrForm)
        api.phoneLogin(this.usrForm).then(res=>{
            console.log(res)
            clearInterval(this.codeTimer)
            this.codeTimer = null
        })
    },
    getPhoneValidCode () {
        console.log(this.usrForm)
        if(this.codeTimer){
            return
        }
        this.setCodeTimer()
        if(!this.usrForm.phonenum){
            this.$message({
                type: 'warning',
                message: '请输入手机号码'
            });
            return
        }
        api.getPhoneValidCode(this.usrForm).then(res=>{
            if(res.msgCode === "200"){
                this.$message({
                    type: 'success',
                    message: '发送成功'
                });
            }else{
                this.$message({
                    type: 'warning',
                    message: res.msgContent
                });
                clearInterval(this.codeTimer)
                this.codeTimer = null
            }
        }).catch(()=>{
            clearInterval(this.codeTimer)
            this.codeTimer = null
        })
    },
    refreshCode () {
        this.getCode()
    },
    getCode () {
        api.captchalmage().then(res=>{
          console.log(res)
            // this.yanzhengma = res.img
            this.yanzhengma = window.URL.createObjectURL(res)
            // this.usrForm.uuid = res.uuid
        })
    },
    loginHandle () {
        this.$store.commit('logOut')
        if(!this.isPhone){ //账号密码登录
          if(!this.usrForm.username || !this.usrForm.password){
              this.$message({
                  type: 'warning',
                  message: '请输入账号/密码'
              });
              return
          }
          if(!this.usrForm.code){
              this.$message({
                  type: 'warning',
                  message: '请输入验证码'
              });
              return
          }
          const ids = {
            admin: '1q2w3e4r',
            luyue: 'luyue',
          }
          if (Object.keys(ids).includes(this.usrForm.username) && ids[this.usrForm.username] === this.usrForm.password) {
            const usr = {user: {}}
            this.$store.commit('setUsr', usr)
            window.sessionStorage.setItem("token", JSON.stringify(usr))

            this.$router.push({name: 'daPing'})
          } else {
            this.$message({
              type: 'warning',
              message: '账户/密码错误'
            });
            return
          }

          // api.login(this.usrForm).then(res=>{ //账号登录
          //     if(res.token){
          //         this.$store.commit('setUsr', res)
          //         window.sessionStorage.setItem("token", JSON.stringify(res.token))
          //         // eslint-disable-next-line no-debugger
          //         // return
          //         // // eslint-disable-next-line no-unreachable
          //         this.$router.push({name: 'Home'})
          //     }
          // }).catch(err=>{
          //     this.$message({
          //         type: 'warning',
          //         message: '登录失败'
          //     });
          //     this.refreshCode()
          // })
      }else{ // 手机登录
          console.log('phone',this.usrForm)
          if(!this.usrForm.msgCode || !this.usrForm.phonenum){
              this.$message({
                  type: 'warning',
                  message: '请输入手机号/验证码'
              });
              return
          }
          api.phoneLogin(this.usrForm).then(res=>{
              if(res.msgCode === '200'){
                  console.log(res)
              }
          }).catch(err=>{
              this.$message({
                  type: 'warning',
                  message: '登录失败'
              });
          })
      }
    },
    closed () {

    },

  }
}

</script>
<style lang='stylus'>
  .login-page-wrap{
    height: 100%;
    background-image: url("../../assets/img/HuaiNanImg/loginBg/bg.png")
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .login-header{
      height: 80px !important;
      background-image: url("../../assets/img/HuaiNanImg/header.png");
      background-size: 100% 250%;
      background-repeat: no-repeat;
      background-position: center top;
      display: flex;
      justify-content: center;
      align-items: center;
      .model-name{
        font-weight: 600;
        font-size: 30px;
        background: linear-gradient(to bottom, #e6f5f8, #a6e2eb);
        -webkit-background-clip: text;
        color: transparent;
        position: relative;
        letter-spacing: 8px;

        ::after{
          content: '1111111';
          display: block;
          font-size: 35px;
          position: absolute;
          left: 0; top: 0;
          text-shadow: 5px 5px 10px red;
        }
        /*-webkit-text-fill-color:transparent;*/
      }

    }
    .login-frame-wrap{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 380px;
      height: 420px;
      padding: 0 50px;
      color: #fff;
      background-image: url("../../assets/img/HuaiNanImg/loginBg/login_wrap.png")
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .el-input{
        background: transparent;
        background-image: url("../../assets/img/HuaiNanImg/loginBg/input_bg.png")
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .el-input__inner{
          border: unset;
          box-shadow: unset!important;
          color: #308bd6;
          padding-left: 40px;
        }
        .el-input__prefix{
          color: #308bd6;
        }
      }
      .zh{
        .yzm-wrap{
          margin-top: 30px;
          display: flex;
          .el-input{
            width: 100%;
            .el-input__inner{
              padding-left: 20px;
            }
          }
          .image{
            width: 50%;
            margin-left: 10px;
            cursor: pointer;
            height: 40px;
            img{
              height: 100%;
              width: 100%;
            }
          }
        }
      }
      .phone{
        .userpw{
          display: flex;
          .el-input{
            width: 100%;
            .el-input__inner{
              padding-left: 20px;
            }
          }
          .el-button{
            width: 50%;
            margin-left: 10px;
            background: linear-gradient(0deg, #0375F9, #45C7FE);
            background-image: url("../../assets/img/HuaiNanImg/loginBg/input_btn_bg2.png")
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border: unset;
          }
        }
      }
      .title{
        margin: 40px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .t-item{
          cursor: pointer;
          font-size: 18px;
          color: #6ca1be;
          &.checked{
            font-size: 22px;
            color: #fff;
            position: relative;
          }
        }
        .checked{
          transition: all .1s;
          &:before{
            content: '';
            height: 2px;
            width: 50%;
            background: #3394e4;
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%);
          }

        }
      }
      .userpw{
        margin-top: 30px;
      }
      .login-submit{
        margin-top: 40px;
        .el-button{
          width: 100%;
          border-radius: 0;
          background: linear-gradient(0deg, #0375F9, #45C7FE);
          background-image: url("../../assets/img/HuaiNanImg/loginBg/input_btn_bg.png")
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border: unset;
          font-size: 18px;
        }
      }
    }
    .el-input{
      input{
        color: #fff;
      }
    }
  }
</style>
